<template>
  <view class="service-detail-container page-container">
    <page-meta>
      <navigation-bar
        :title="detail.name"
        background-color="#fff"
        front-color="#333"
      />
    </page-meta>
    <!-- 服务商品详情页 -->
    <!-- 顶部导航 -->
    <view class="header-nav" :style="{ opacity: headerOpt }">
      <view
        class="header-nav-item"
        :class="{ 'header-nav-item-active': headerNav == 'goods' }"
        @click="navChange('goods')"
      >
        <text>商品</text>
        <view class="header-nav-item-active-icon" v-if="headerNav == 'goods'">
          <image
            :src="$img_path('/home/detail/nav-active.png')"
            mode="widthFix"
          ></image>
        </view>
      </view>
      <view
        class="header-nav-item"
        :class="{ 'header-nav-item-active': headerNav == 'rate' }"
        @click="navChange('rate')"
      >
        <text>用户评价</text>
        <view class="header-nav-item-active-icon" v-if="headerNav == 'rate'">
          <image
            :src="$img_path('/home/detail/nav-active.png')"
            mode="widthFix"
          ></image>
        </view>
      </view>
      <view
        class="header-nav-item"
        :class="{ 'header-nav-item-active': headerNav == 'detail' }"
        @click="navChange('detail')"
      >
        <text>详情介绍</text>
        <view class="header-nav-item-active-icon" v-if="headerNav == 'detail'">
          <image
            :src="$img_path('/home/detail/nav-active.png')"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
    <!-- 商品轮播图 -->
    <view class="service-detail-swiper">
      <uni-swiper-dot
        class="uni-swiper-dot-box"
        @clickItem="clickSwiperItem"
        :info="[1, 2, 3]"
        :current="swiperCurrent"
        mode="round "
        field="content"
      >
        <swiper
          class="service-detail-swiper-box"
          @change="swiperChange"
          :current="swiperDotIndex"
          :autoplay="true"
        >
          <swiper-item v-if="detail.video">
            <view class="service-detail-swiper-item">
              <video
                style="width: 100%; height: 100%"
                :src="$img_base_url(detail.video)"
              ></video>
            </view>
          </swiper-item>
          <swiper-item v-for="(item, index) in detail.images" :key="index">
            <view class="service-detail-swiper-item">
              <lazy-image :src="item" mode="aspectFill"></lazy-image>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
      <view class="dots" v-if="false">
        <view
          class="video viewbox"
          :class="swiperDotIndex == 0 ? 'select' : ''"
          @click.stop="checkSwiper(0)"
        >
          视频
        </view>
        <view
          class="img viewbox"
          :class="swiperDotIndex > 0 ? 'select' : ''"
          @click.stop="checkSwiper(1)"
        >
          图集
        </view>
      </view>
    </view>
    <!-- 主体内容 -->
    <view class="service-detail-content">
      <!-- 商品信息 -->
      <view class="service-goods-info-box card-box">
        <!-- 金额 -->
        <view class="service-price-item">
          <view class="service-price">
            <view class="">
              <text class="pre">￥</text>
              <text>{{ detail.price }}</text>
              <!-- <text class="sufix">/台</text> -->
            </view>
            <text class="old-price">￥{{ detail.market_price }}</text>
          </view>
          <view class="service-share" @click="shareDetail">
            <image
              class="service-share-icon"
              :src="$img_path('/home/detail/share.png')"
              mode="widthFix"
            >
            </image>
          </view>
        </view>
        <!-- 标题 -->
        <view class="service-goods-title">
          <text>{{ detail.name }}</text>
        </view>
        <!-- 标签列表 -->
        <view class="service-goods-tags" v-if="detail.tag_name">
          <view
            class="service-goods-tag"
            v-for="(item, index) in detail.tag_name.split(',')"
            :class="{ 'tag-primary': index == 0 }"
            :key="index"
          >
            <text>{{ item }}</text>
          </view>
        </view>
        <!-- 销量 -->
        <view class="service-goods-sale">
          <text>销量：{{ detail.salenums }}</text>
        </view>
        <!-- 分割线 -->
        <view class="gap"></view>
        <!-- 选择 -->
        <view class="service-goods-select-wrap" v-if="detail.sku.length > 0">
          <view class="select-label">
            <text>选择</text>
          </view>
          <view class="select-goods" @click="openSkuPopup">
            <view class="select-goods-title">
              <text v-if="skuItem.id">已选：{{ skuItem.name }}</text>
              <text v-else>未选择</text>
            </view>
            <view class="select-icon">
              <image
                :src="$img_path('/common/icon_r.png')"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 内容块 -->
      <view class="service-goods-content-box card-box mt-20" v-if="false">
        <scroll-view class="service-goods-content_H" scroll-x="true">
          <view
            class="service-goods-content-item_H"
            v-for="item in 3"
            :key="item"
          >
            <view class="service-goods-content-item">
              <view class="service-goods-content-item-icon">
                <image
                  :src="$img_path('/home/detail/icon-content.png')"
                  mode="widthFix"
                ></image>
              </view>
              <view class="service-goods-content-item-text">
                <text v-for="i in item + 1" :key="i">内容内容</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 评论列表 -->
      <view class="comments-box card-box mt-20" @click="gotoCommentPage">
        <view class="comments-header">
          <view class="comments-header-title">
            <text>用户评价</text>
            <text class="comments-count">({{ comment.data.totalNum }})</text>
          </view>
          <view class="comments-header-more">
            <text>好评率{{ comment.data.goodPercent * 100 }}%</text>
            <view class="comments-header-more-icon">
              <image
                :src="$img_path('/common/icon_r.png')"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
        <!-- 评论列表 -->
        <scroll-view class="comments-content_H mt-20" scroll-x="true">
          <view
            class="comments-content-item_H"
            v-for="(item, index) in comment.list"
            :key="index"
          >
            <view class="comments-content-item">
              <!-- 用户信息区域 -->
              <view class="comments-user">
                <!-- 头像 -->
                <view class="comments-user-avatar">
                  <lazy-image
                    :src="item.user.avatar"
                    mode="widthFile"
                  ></lazy-image>
                </view>
                <!-- 用户信息 -->
                <view class="comments-user-info-box">
                  <!-- 用户昵称和评分 -->
                  <view class="comments-user-info">
                    <view class="comments-user-info-left">
                      <view class="comments-user-nickname">
                        <text>{{ item.user.nickname }}</text>
                      </view>
                      <view class="comments-user-rate">
                        <uni-rate
                          :value="item.score"
                          readonly
                          size="13"
                        ></uni-rate>
                      </view>
                    </view>
                    <view class="comments-time">
                      <text>{{ timestampToDate(item.createtime * 1000) }}</text>
                    </view>
                  </view>
                  <!-- 标签 -->
                  <view class="comments-user-tags">
                    <view class="comments-user-tag">
                      <text>回头客常拼</text>
                    </view>
                  </view>
                </view>
              </view>
              <!-- 评价内容区域 -->
              <view class="comments-textarea mt-20 text_ovf">
                {{ item.content }}
              </view>
              <!-- 商品截图区域 -->
              <view class="comments-goods-images mt-20">
                <view
                  class="comments-goods-image"
                  v-for="(image, subIndex) in item.images"
                  :key="subIndex"
                >
                  <lazy-image :src="image"></lazy-image>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 商品详情 -->
      <view class="goods-detail-box mt-20">
        <!-- 标题 -->
        <view class="goods-detail-title card-box">
          <text>详情介绍</text>
        </view>
        <!-- 内容 -->
        <view class="goods-detail-content">
          <view class="" v-html="detail.content"></view>
          <!-- <image :src="$img_path('/home/detail/detail-content.png')" mode="widthFix"></image> -->
          <!-- <image :src="$img_path('/home/detail/detail-content-bottom.png')" mode="widthFix"></image> -->
        </view>
      </view>

      <!-- 底部信息 -->
      <view class="bottom-info-box">
        <view class="bottom-info-image">
          <!-- <image src="" mode=""></image> -->
          <text>图标</text>
        </view>
        <view class="bottom-info-text">
          <text>介绍介绍 介绍介绍</text>
        </view>
      </view>

      <!-- 右侧固定企业微信按钮 -->
      <view class="fixed-btn">
        <view class="fixed-btn-image">
          <image
            :src="$img_path('/home/detail/wxchat.png')"
            mode="widthFix"
          ></image>
        </view>
        <view class="fixed-btn-text">
          <text>企业微信群</text>
        </view>
      </view>
      <!-- 底部固定购买按钮 -->
      <view class="goods-bottom-nav" v-if="true">
        <view class="goods-bottom-nav-left">
          <view class="goods-bottom-nav-left-item">
            <view class="goods-bottom-nav-icon">
              <image
                :src="$img_path('/home/detail/call.png')"
                mode="widthFix"
              ></image>
            </view>
            <view class="goods-bottom-nav-icon-text">
              <text>拨打电话</text>
            </view>
          </view>
          <view class="goods-bottom-nav-left-item" @click="handlefollow">
            <view class="goods-bottom-nav-icon">
              <image
                v-if="detail.followState"
                :src="$img_path('/home/detail/sc.png')"
                mode="widthFix"
              ></image>
              <image
                v-else
                :src="$img_path('/home/detail/sc-1.png')"
                mode="widthFix"
              ></image>
            </view>
            <view class="goods-bottom-nav-icon-text">
              <text>收藏</text>
            </view>
          </view>
        </view>
        <view class="goods-bottom-nav-right">
          <view
            class="goods-bottom-nav-btn common-btn-bg-color"
            @click="submit"
          >
            <text>立即预约</text>
          </view>
        </view>
      </view>
      <!-- 添加按钮 -->
      <view class="goods-bottom-nav" v-else>
        <view class="common-btn-bg-color one-btn" @click="openAddCartPopup">
          <text>添加</text>
        </view>
      </view>
    </view>
    <!-- 选择规格弹窗 -->
    <SkuPopup ref="skuPopup" :skus="detail.sku" @confirm="confirm" @close="close" />
    <addCartPopup ref="addCartPopup" @confirm="confirm" />
    <!-- 分享弹窗 -->
    <sharePopupVue ref="sharePopup" />
    <canvas
      canvas-id="offlineCanvas"
      style="
        width: 634px;
        height: 968px;
        position: fixed;
        z-index: -1;
        opacity: 0;
        background-color: #ffffff;
      "
    ></canvas>
  </view>
</template>

<script>
import SkuPopup from "./components/sku-popup/sku-popup.vue";
import addCartPopup from "./components/add-cart-popup/add-cart-popup.vue";
import sharePopupVue from "./components/share-popup/share-popup.vue";
import {
  getServiceGoodsDetail,
  getServiceGoodsCommentList,
  getServiceGoodsCommentTotal,
  handlefollow,
} from "../../utils/api/serviceApi";
import { timestampToDate } from "@/utils/utils";
export default {
  components: {
    SkuPopup,
    addCartPopup,
    sharePopupVue,
  },
  onLoad(options) {
    const { id } = options;
    console.log("options", options);
    this.id = options.id;
    this.init();
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  data() {
    return {
      id: null,
      swiperCurrent: 0,
      swiperDotIndex: 0,
      dotsStyles: {
        backgroundColor: "rgba(255, 255, 255, .4)",
        border: "1px rgba(255, 255, 255, .4) solid",
        color: "#fff",
        selectedBackgroundColor: "rgba(255, 255, 255, 1)",
        selectedBorder: "1px rgba(255, 255, 255, 1) solid",
      },
      scrollTop: 0,
      headerOpt: 0,
      headerNav: "goods",
      eleScrollTop: {
        comments: 0,
        goodsDetail: 0,
      },
      skuShow: true,
      swiperIndex: 0,
      detail: {
        images: [],
        sku: [],
        content: "",
      },
      comment: {
        list: [],
        data: {
          badNum: 0,
          goodNum: 0,
          goodPercent: "0.00",
          imageNum: 0,
          middleNum: 0,
          totalNum: 0,
        },
      },
      goodsType: {
        0: "家政商品",
        1: "定死服务",
        2: "按次服务",
      },
      skuItem: {},
    };
  },
  watch: {
    scrollTop() {
      this.headerOpt = Math.min(1, this.scrollTop / 300);
      if (this.scrollTop < this.eleScrollTop.comments) {
        this.headerNav = "goods";
      } else if (
        this.scrollTop >= this.eleScrollTop.comments &&
        this.scrollTop < this.eleScrollTop.goodsDetail
      ) {
        this.headerNav = "rate";
      } else {
        this.headerNav = "detail";
      }
    },
  },
  methods: {
    init() {
      this.getGoodsDetail();
      this.getEleScrollTop();
      this.getServiceGoodsCommentList();
      this.getServiceGoodsCommentTotal();
    },
    async getGoodsDetail() {
      try {
        const res = await getServiceGoodsDetail({
          id: this.id,
        });
        console.log("res", res);
        this.detail = res.data;
        this.detail.images = res.data.images.map((item) => {
          return this.$img_base_url(item);
        });
      } catch (e) {
        //TODO handle the exception
        console.log("e", e);
      }
    },
    getEleScrollTop() {
      const that = this;
      const query = uni.createSelectorQuery();

      // 评价内容
      query.select(".comments-box").boundingClientRect();
      query.select(".goods-detail-box").boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
      query.exec((res) => {
        console.log("评价元素距离页面顶部的距离", res[0]);
        console.log("详情元素距离页面顶部的距离", res[1]);
        that.eleScrollTop.comments = res[0].top - 50;
        that.eleScrollTop.goodsDetail = res[1].top - 50;
      });
    },
    navChange(type) {
      this.headerNav = type;
      const scrollPositions = {
        goods: 0,
        rate: this.eleScrollTop.comments + 50,
        detail: this.eleScrollTop.goodsDetail + 50,
      };
      uni.pageScrollTo({
        scrollTop: scrollPositions[this.headerNav],
        duration: 300,
      });
    },
    // 点击轮播图
    clickSwiperItem() {
      console.log("点击轮播图");
    },
    swiperChange(e) {
      const current = e.detail.current;
      console.log("e current", current);
      this.swiperDotIndex = current;
    },

    // 收藏/取消收藏
    handlefollow() {
      handlefollow({
        follow_id: this.id,
        state: this.detail.followState ? 0 : 1,
      }).then((res) => {
        uni.showToast({
          title: this.detail.followState ? "取消收藏成功" : "收藏成功",
          icon: "none",
        });
        this.getGoodsDetail();
      });
    },

    // 分享
    shareDetail() {
      console.log("分享");
      this.$refs.sharePopup.open();
    },
    openSkuPopup() {
      this.$refs.skuPopup.open();
    },
    confirm(skuItem) {
      console.log("skuItem", skuItem);
      this.skuItem = skuItem;
      this.submit();
    },
    checkSwiper(val) {
      this.swiperIndex = val;
      this.swiperDotIndex = val;
    },
    openAddCartPopup() {
      this.$refs.addCartPopup.open();
    },
    gotoCommentPage() {
      uni.navigateTo({
        url: `/pagesService/serviceCommentList/serviceCommentList?goods_id=${this.id}&type=goods`,
      });
    },
    async getServiceGoodsCommentList() {
      try {
        const res = await getServiceGoodsCommentList({
          goods_id: this.id,
          page: 1,
        });
        console.log("商品评价列表", res);
        this.comment.list = res.data;
      } catch (e) {
        //TODO handle the exception
      }
    },

    async getServiceGoodsCommentTotal() {
      try {
        const res = await getServiceGoodsCommentTotal({
          goods_id: this.id,
          type: "goods",
        });
        console.log("商品评价统计数据", res);
        this.comment.data = res.data;
      } catch (e) {
        //TODO handle the exception
      }
    },

    timestampToDate(time) {
      let date = timestampToDate(time);
      return date;
    },

    submit() {
      // if(this.detail.is_wt==1){
      // 	uni.navigateTo({
      // 		url:`/pagesService/commissioningService/commissioningService?id=${this.detail.id}`
      // 	})
      // 	return
      // }

      if (this.detail.sku.length <= 0) {
        uni.navigateTo({
          url: `/pagesService/serviceConfrimOrder/serviceConfrimOrder?goods_id=${this.id}&sku_id=`,
        });
        return;
      }
      if (this.skuItem.id) {
        uni.navigateTo({
          url: `/pagesService/serviceConfrimOrder/serviceConfrimOrder?goods_id=${this.id}&sku_id=${this.skuItem.id}`,
        });
      } else {
        this.openSkuPopup();
      }
    },
	close(){
		this.skuItem = {}
	}
  },
};
</script>

<style lang="scss" scoped>
@import "serviceDetail.scss";
</style>